<!-- 搜索词 -->
<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="搜索词" name="search">
            <el-card>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="搜索词名称">
                        <el-input v-model="formInline.word" placeholder="请输入搜索词" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="onReset">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card style="margin-top: 24px;">
                <el-descriptions title="搜索词列表">
                </el-descriptions>
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column label="搜索词排名" type="index" width="100" />
                    <el-table-column prop="word" label="搜索词名称"></el-table-column>
                    <el-table-column prop="searchNum" label="累计搜索次数">
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                        <template #default="{ row }">
                            <el-button @click="ckeck(row.word)" type="primary" link>查看用户</el-button>
                            <el-button @click="del(row.word)" type="danger" link>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-pagination v-model:current-page="formInline.pageNum" v-model:page-size="formInline.pageSize"
                :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </el-tab-pane>
        <el-tab-pane label="热词设置" name="hot">
            <el-card>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="热词名称">
                        <el-input v-model="formInline.word" placeholder="请输入搜索词" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="onReset">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card style="margin-top: 24px;">
                <el-descriptions title="搜索词列表">
                    <template #extra>
                        <el-button @click="BatchDel">批量删除</el-button>
                        <el-button @click="addNotice" type="primary">添加热词</el-button>
                    </template>
                </el-descriptions>
                <el-table ref="multipleTableRef" :data="tableData1" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="热词排名" type="index" width="100" />
                    <el-table-column prop="word" label="搜索词名称"></el-table-column>
                    <el-table-column prop="isHot" label="是否展示">
                        <template #default="{ row }">
                            <el-switch @change="switchChange(row, $event)" v-model="row.isHot" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="sort" label="排序" />
                    <el-table-column prop="address" label="操作">
                        <template #default="{ row }">
                            <el-button @click="edit(row)" type="primary" link>编辑</el-button>
                            <el-button @click="del(row.wordId)" type="danger" link>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-pagination v-model:current-page="formInline.pageNum" v-model:page-size="formInline.pageSize"
                :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </el-tab-pane>
    </el-tabs>

    <!-- 添加弹窗 -->
    <el-dialog v-model="AddDialog" title="添加" width="25%" :before-close="handleClose">
        <el-form label-position="right" label-width="100px" :model="formLabelAlign">
            <el-form-item label="搜索词名称">
                <el-input v-model="formLabelAlign.word" placeholder="请输入搜索词名称" />
            </el-form-item>
            <el-form-item label="是否展示">
                <el-switch v-model="formLabelAlign.isHot" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="formLabelAlign.sort" placeholder="请输入排序" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 查看用户弹窗 -->
    <el-dialog v-model="checkDialog" :title="DialogTitle">
        <el-table :data="DialogData" stripe style="width: 100%">
            <el-table-column prop="username" label="会员昵称" />
            <el-table-column prop="searchNum" label="搜索次数" />
            <el-table-column prop="labelNameList" label="分组标签" />
            <el-table-column prop="levelTitle" label="会员等级" />
            <el-table-column prop="searchTime" label="搜索时间" />
        </el-table>
    </el-dialog>
</template>
<script setup>
import { defineComponent, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { GetSearchListApi, AddSearchListApi, EditSearchListApi, delSearchListApi, CheckUserSearchListApi, BatchDelUserSearchListApi } from '@/api/SearchWord'


defineComponent({
    components: {
    }
})

const activeName = ref('search')

const column = [
    { label: '会员昵称', prop: 'belongFlag' },
    { label: '分组标签', slots: 'labelName' },
    { label: '会员等级', slots: 'isBoxTab' },
    { label: '搜索时间', slots: 'labelStatus' },
]

const formInline = ref({
    word: null,
    type: 1,
    pageNum: 1,
    pageSize: 10
})
const total = ref(0)
const tableData = ref([])
const tableData1 = ref([])
const AddDialog = ref(false)
const checkDialog = ref(false)
//弹窗form
const formLabelAlign = ref({
    word: null,
    isHot: 0,
    sort: null,
})



//获取列表
async function GetNoticeList(data) {
    const res = await GetSearchListApi(data)
    total.value = res.data.totalSize
    if (formInline.value.type === 1) {
        tableData.value = res.data.content
    } else {
        tableData1.value = res.data.content
    }
    // tableData.value = [{
    //     word: '999',
    //     searchNum: 1,
    //     isHot: 1,
    //     sort: 1
    // }]
    // console.log(res.data.content);
}

GetNoticeList(formInline.value)

//添加公告
function addNotice() {
    AddDialog.value = true
}

//弹窗关闭
function handleClose() {
    AddDialog.value = false
    formLabelAlign.value = {
        word: null,
        isHot: 0,
        sort: null,
    }
    GetNoticeList(formInline.value)

}

//保存
async function save() {
    console.log(formLabelAlign.value);
    if (!formLabelAlign.value.wordId) {
        await AddSearchListApi(formLabelAlign.value)
        ElMessage({
            message: '添加成功',
            type: 'success',
        })
    } else {
        await EditSearchListApi(formLabelAlign.value)
        ElMessage({
            message: '编辑成功',
            type: 'success',
        })
    }

    handleClose()
    GetNoticeList(formInline.value)
}

//pageSize改变时
function handleSizeChange(params) {
    formInline.value.pageSize = params
    GetNoticeList(formInline.value)
}

//页码改变时
function handleCurrentChange(params) {
    formInline.value.pageNum = params
    GetNoticeList(formInline.value)

}

//查询
function onSubmit() {
    console.log(formInline);
    GetNoticeList(formInline.value)
}

//重置
function onReset() {
    formInline.value.word = null
    formInline.value.pageNum = 1
    formInline.value.pageSize = 10
    GetNoticeList(formInline.value)

}



//删除按钮
async function del(id) {
    ElMessageBox.confirm(
        '确认删除吗?',
        '删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await BatchDelUserSearchListApi([id])
        GetNoticeList(formInline.value)
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消成功',
        })
    })
}

//开关按钮
async function switchChange(row, e) {
    // row.isHot = row.isHot === 1 ? 0 : 1
    // await EditSearchListApi(row)
    // ElMessage({
    //     message: '修改状态成功',
    //     type: 'success',
    // })
    if (formInline.value.type === 2) {
        await EditSearchListApi({
            wordId: row.wordId,
            isHot: e,
            word: row.word,
            sort: row.sort,

        })
        ElMessage({
            message: '修改状态成功',
            type: 'success',
        })
        GetNoticeList(formInline.value)

    }
}

//是否编辑状态
const isEdit = ref(false)
//编辑按钮
async function edit(row) {
    formLabelAlign.value = row
    isEdit.value = true
    AddDialog.value = true
}

//用户list
const DialogData = ref([])
const DialogTitle = ref('')
//查看用户
async function ckeck(word) {
    DialogTitle.value = word
    const res = await CheckUserSearchListApi({ word })
    DialogData.value = res.data.content
    checkDialog.value = true
}

//tba被选中时
function handleClick(params) {
    console.log(params.props.label);
    formInline.value.word = null
    if (params.props.label === '热词设置') {
        formInline.value.type = 2
    } else {
        formInline.value.type = 1
    }
    GetNoticeList(formInline.value)
}


const wordIdList = ref([]) //删除的数组id
//table表格选中
function handleSelectionChange(params) {
    params.forEach(item => {
        wordIdList.value.push(item.wordId)
    })
}

//批量删除
async function BatchDel() {
    ElMessageBox.confirm(
        '确认删除吗?',
        '删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await BatchDelUserSearchListApi(wordIdList.value)
        GetNoticeList(formInline.value)
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消成功',
        })
    })
}
</script>
  
<style scoped lang="sass">
  
  </style>